<template>
  <div id="historyPage">


    <div class="flex_head">
      <div class="solid"></div>
      <div class="item_two">
        <h3>历史登录</h3>
      </div>
    </div>
    <div class="main">

      <div class="mainContent">

        <el-table :data="tableData" border style="width: 100%" v-loading="loading">
          <el-table-column type="index" width="80">
          </el-table-column>
          <el-table-column prop="ip" label="IP地址">
          </el-table-column>
          <el-table-column prop="createTime" label="登录时间">
          </el-table-column>

        </el-table>

        <div class="block" style="text-align: right;padding-right: 40px;">

          <el-pagination :current-page.sync="pageNumber" @current-change='handleChange' :page="pageNumber"
                         :page-size="pageSize" layout="total, prev, pager, next" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import dateformat from 'dateformat'

  export default {
    data () {
      return {
        pageNumber: 1,
        pageSize: 10,
        total: 1,
        loading: false,
        tableData: [{
          date: '2016-05-02',
          address: '172.165.2.32'
        }, {
          date: '2016-05-04',

          address: '172.165.2.32'
        }, {
          date: '2016-05-01',

          address: '172.165.2.32'
        }, {
          date: '2016-05-03',

          address: '172.165.2.32'
        }]
      }
    },
    created() {
      this.getHistoryList()
    },
    methods: {

      getHistoryList() {
        this.loading = true;
        let params = {
          pageSize: this.pageSize,
          pageNumber: this.pageNumber
        }
        this.$api.getLoginLog(params).then(res => {
          if (res.code == '000000') {
            console.log(res.data);
            this.loading = false;
            this.total = res.data.totalRow;
            this.tableData = res.data.list;
            this.tableData.forEach(item => {
              let date = new Date(item.createTime);
              item.createTime = dateformat(date, 'yyyy-mm-dd HH:MM:ss')
            })
          }
        })
      },
      handleChange(val) {
        this.pageNumber = val;
        this.getHistoryList()
      }
    }
  }
</script>

<style lang="less">
  #historyPage {
    padding: 20px;
    .icon-icon1 {
      font-size: 35px !important;
      margin-right: 35px;
      position: absolute;
      color: #008000;
      right: 100px;
      bottom: -8px;
    }
    th {
      text-align: center;
    }
    .title {
      text-align: right;
      font-size: 12px;
      margin-bottom: 10px;
      position: relative;
    }
    .icon-icon1 {
      font-size: 25px;
    }

    .main {
      h3 {
        padding: 20px;
      }
      .mainContent {
        width: 90%;
        margin: auto;
      }
    }
  }
</style>
